<template>
  <div class="register">
    <van-form required="auto">
      <van-field
        v-model="phone"
        :rules="[{ required: true }]"
        label="手机号码"
        placeholder="注册手机为找回密码的唯一凭证"
      />
      <van-field
        v-model="username"
        :rules="[{ required: true }]"
        label="登录名"
        placeholder="中、英文均可，不超过12个字符"
      />
      <van-field
        v-model="password"
        type="password"
        :rules="[{ required: true }]"
        label="密码"
        placeholder="3-18位英文、数字、符号，区分大小写"
      />
      <van-cell-group inset>
        <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <template #button>
            <van-button size="small" type="primary">发送验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>
      <van-button size="large" type="primary" @click="register">注册</van-button>
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getUserInfoPost,type UserList } from '@/api'

const username = ref<string>('')
const phone = ref<string>('')
const password = ref<string>('')
const sms = ref<string>('')



function register(){
  // console.log('注册');
  
  const UserData:UserList.Item = {
    username : username.value,
    password : password.value,
    phone : phone.value
  }

  const {data}:any = getUserInfoPost(UserData)
  console.log('data',data);
  
}

</script>
